{% extends "trees/base.html" %}
{% block title %}Tree Added - JM3{% endblock %}
{% block content %}
<div class="text-center" style="margin-top:8vh;">
  <div style="font-size:3.5rem;">✓</div>
  <h2 class="text-jm3 mb-1">Tree Added</h2>
  <h4 class="mb-3">{{ tree.display_name }}</h4>

  <div class="card shadow-sm col-11 col-md-6 mx-auto text-start mb-4">
    <div class="card-body">
      {% if tree.photo %}<img src="{{ tree.photo.url }}" class="img-fluid rounded mb-3" alt="">{% endif %}
      <div class="d-flex justify-content-between"><span class="text-muted">Species</span><strong>{{ tree.species.common_name|default:"—" }}</strong></div>
      <div class="d-flex justify-content-between"><span class="text-muted">Location</span><strong>Captured ✓</strong></div>
      <div class="d-flex justify-content-between"><span class="text-muted">Verification</span>
        <span class="badge badge-{{ tree.verification_status }} text-capitalize">{{ tree.get_verification_status_display }}</span></div>
    </div>
  </div>

  <div class="d-grid gap-2 col-11 col-md-6 mx-auto">
    <a href="{% url 'register_tree' %}" class="btn btn-jm3 btn-lg">+ Add Another</a>
    <a href="{% url 'tree_detail' tree.pk %}" class="btn btn-outline-success">View Tree</a>
  </div>
</div>
{% endblock %}
{% block extra_js %}{% endblock %}